import React, {Component} from 'react';
import axios from "axios";

class Search extends Component {
    search = () => {
        // 获取用户输入(连续解构赋值+重命名)
        const {keyWordElement: {value: keyWord}} = this
        // 发送请求前通知App更新状态,既然准备点击按钮发送请求就不再是第一次进入界面
        this.props.updateAppState({isFirst: false, isLoading: true})
        // console.log('keyWord',keyWord)
        // 发送请求
        axios.get(`/api/search/users?q=${keyWord}`).then(
            // 请求成功后通知App更新状态
            response => {

                this.props.updateAppState({isLoading: false, users: response.data.items})

            },
            error => {
                this.props.updateAppState({isLoading: false, err: error.message})
                console.log('err', error)
            }
        )
    }


    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索github用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键字"/>&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        );
    }
}

export default Search;
